<template>
  <div>
    <div class="detail-tile-com d-none d-sm-none d-md-block d-lg-block">
      <h2>{{title}}</h2>
    </div>
    <div class="detail-tile-com d-block d-sm-block d-md-none d-lg-none"
         v-if="!isNullOrEmpty(threeNav.children)"
         :class="{'three-nav-wrap':!isNullOrEmpty(threeNav.children)}">
      <h2 class="d-none d-sm-none d-md-block d-lg-block">{{title}}</h2>
      <div class="three-nav">
        <ul>
          <li  @click.stop="change(subItem)"
               class="item"
               :key="index"
               v-for="(subItem,index) in threeNav.children"
               :class="{'item-active': subItem.active}">
          <span class="over-flow-text">
            {{subItem.title}}
          </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: ['title'],
    computed: {},
    data() {
      return {
        threeNav:{}
      }
    },
    components: {},
    mounted() {
      //初始化接受信息
      this.cenetrCntrol.$on('changeNav',(subNav)=>{
          if(!this.isNullOrEmpty(subNav)){
            //更新选中的子菜单
            this.threeNav = subNav.children.find((item)=>{
              return item.active
            });
        }
      });
    },
    methods: {
      change(item) {
        this.$router.push({path: item.link})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";
  .detail-tile-com {
    margin-top: 20/@size;
    border-bottom: 2px solid #E5E9F2;
    .height(35);
    position: relative;
    h2 {
      font-family: MicrosoftYaHeiUI;
      font-size: 16/@size;
      color: @theme-color;
      position: absolute;
      left: 0;
      display: inline-block;
      padding-left: 20/@size;
      padding-right: 20/@size;
      height: 100%;
      &:after {
        content: "";
        width: 100%;
        height: 2px;
        background: @theme-color;
        position: absolute;
        bottom:-2/@size;
        left: 0;
      }
    }
  }
  @media (min-width: 320px) and (max-width:767px) {
    .three-nav-wrap{
      min-height: 85/@size !important;
      height: auto !important;
    }
    .detail-tile-com {
      .height(70);
      h2 {
        font-family: @font-title;
        font-size:@font-30;
        padding-left: 28/@size;
        &:after {
          bottom: -4/@size;
        }
      }
      .three-nav{
        ul{
          display: flex;
          flex-wrap: wrap;
          li{
            display: flex;
            justify-content: center;
            width: 25%;
            margin-bottom: 15/@size;
            span{
              border: 1px solid @theme-color;
              padding: 0 10/@size;
              .border-radus(10);
              .height(60);
              .line-height(60);
              -webkit-line-clamp:1;
              font-size: @font-28;
            }
          }
          .item-active{
            background: @theme-color;
            border-radius: 10/@size;
            color: @white-color;
          }
        }
      }
    }
  }


</style>
